<template>
	<view class="bell">
		<statusBar />
		<!-- 设置 -->
		<view @tap="leftIndex" class="nav">
			<image src="../../static/setup/jiantou.png" mode=""></image>
			<view>设置</view>
		</view>
		<view class="stores">
			<!-- 开启消息推送 -->
			<view>
				<view>开启消息推送</view>
				<view v-if="this.openList==1">已开启</view>
				<view v-else>已关闭</view>
			</view>
			<!-- 震动提醒 -->
			<!-- <view>
				<view>震动提醒</view>
				<view>
					<view><u-switch v-model="checked" @change="change"></u-switch></view>
				</view>
			</view> -->

			<!-- 铃声播报次数 -->
			<view class="broadcasts">
				<view>
					<view>铃声播报次数</view>
					<view @tap="Use">使用推荐设置</view>
				</view>
				<!-- 预订单快到时间 -->
				<view>预订单快到时间</view>
				<view class="reminder">
					<!-- 预订单提醒 -->
					<view>
						<view></view>
						<view>预订单提醒</view>
					</view>

					<!-- 新订单 -->
					<view class="Automatic">
						<view>新订单</view>
						<view>
							<view>3次 (推荐)</view>
							<view><image src="../../components/min-collapse/arrow.png" mode=""></image></view>
						</view>
					</view>
					<!-- 自动接单 -->
					<view class="Automatic">
						<view>自动接单</view>
						<view>
							<view>1次 (推荐)</view>
							<view><image src="../../components/min-collapse/arrow.png" mode=""></image></view>
						</view>
					</view>

					<!-- 被其他设备接单 -->
					<view class="Automatic">
						<view>被其他设备接单</view>
						<view>
							<view>1次 (推荐)</view>
							<view><image src="../../components/min-collapse/arrow.png" mode=""></image></view>
						</view>
					</view>

					<!-- 催单 -->
					<view class="Automatic">
						<view>催单</view>
						<view>
							<view>1次 (推荐)</view>
							<view><image src="../../components/min-collapse/arrow.png" mode=""></image></view>
						</view>
					</view>
				</view>
				<!-- 2 -->
				<view class="reminder">
					<view>
						<view></view>
						<view>取消与退款提醒</view>
					</view>
					<!-- 订单被用户取消 -->
					<view class="Automatic">
						<view>订单被用户取消</view>
						<view>
							<view>3次 (推荐)</view>
							<view><image src="../../components/min-collapse/arrow.png" mode=""></image></view>
						</view>
					</view>
					<!-- 用户申请退款 -->
					<view class="Automatic">
						<view>用户申请退款</view>
						<view>
							<view>3次 (推荐)</view>
							<view><image src="../../components/min-collapse/arrow.png" mode=""></image></view>
						</view>
					</view>
				</view>
				<!-- 3 -->
				<view class="reminder">
					<!-- 配送提醒 -->
					<view>
						<view></view>
						<view>配送提醒</view>
					</view>
					<!-- 配送异常 -->
					<view class="Automatic">
						<view>配送异常</view>
						<view>
							<view>3次 (推荐)</view>
							<view><image src="../../components/min-collapse/arrow.png" mode=""></image></view>
						</view>
					</view>
					<!-- 订单发配送失败 -->
					<view class="Automatic">
						<view>订单发配送失败</view>
						<view>
							<view>3次 (推荐)</view>
							<view><image src="../../components/min-collapse/arrow.png" mode=""></image></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 以上设置均只在该手机上有效 -->
		<view class="valid">以上设置均只在该手机上有效</view>
		<!-- 弹出层 -->
		<u-popup v-model="show" mode="center" width="88%">
			<view class="authorize">
				<view>确定使用推荐设置吗</view>
				<view>推荐铃声播报次数设置如下：</view>
				<view>
					<view>· 预订单快到时间：播报3次</view>
					<view>· 新订单：播报3次</view>
					<view>· 自动接单：播报1次</view>
					<view>· 被其他设备接单：播报1次</view>
					<view>· 催单：播报3次</view>
					<view>· 订单被用户取消：播报3次</view>
					<view>· 用户申请退款：播报1次</view>
					<view>· 配送异常：播报1次</view>
					<view>· 订单配送失败：播报1次</view>
				</view>
				<!-- 确定 -->
				<view>
					<view @tap="Iknow">我知道了</view>
					<view>继续开启</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { toast } from '@/utils/toast';
import request from '@/utils/request';
import statusBar from '../../components/statusBar/statusBar.vue';
export default {
	data() {
		return {
			checked: false,
			show:false,
			openList:[]
		};
	},
	components: {
		statusBar
	},
	created() {
		this.isset()
	},
	methods: {
		// 接口
		isset(){
			uni.showLoading({
				title: '加载中',
				duration: 2000
			});

			request('/merchant/shop/voice-set', 'GET', {

			}).then(res => {
				if (res.data.code == 1) {
					console.log(res.data, 88);
					this.openList = res.data[0].voiceOpen
					console.log(this.openList,111)
					setTimeout(() => {
						uni.hideLoading();
					}, 500);

				}
				try{
					this.openList = JSON.parse(res.data[0]).voiceOpen
				}catch(e){
					this.openList = res.data[0].voiceOpen
					//TODO handle the exception
				}

			});
		},

		leftIndex() {
			uni.navigateBack({
				delta: 1
			});
		},
		change(status) {
			console.log(status, 1111);
		},
		Iknow(){
			this.show = false
		},
		Use(){
			this.show = true
		}
	}
};
</script>
<style lang="scss" scoped>
.bell {
	.nav {
		display: flex;
		align-items: center;
		padding: 50upx 30upx 31upx 30upx;
		background: $bg1-color;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;

		image {
			width: 27upx;
			height: 30upx;
			display: flex;
		}
		& > view {
			font-size: 34upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: $bg2-color;
			margin-left: 30upx;
		}
	}
	.stores {
		padding-top: 100upx;
		& > view:nth-child(1) {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #ffffff;
			padding: 40upx 31upx 39upx 31upx;
			& > view:nth-child(1) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg2-color;
			}
			& > view:nth-child(2) {
				font-size: 30upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg5-color;
			}
		}
		// & > view:nth-child(2) {
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: space-between;
		// 	background: #ffffff;
		// 	padding: 40upx 31upx 39upx 31upx;
		// 	margin-top: 30upx;
		// 	& > view:nth-child(1) {
		// 		font-size: 32upx;
		// 		font-family: Source Han Sans CN;
		// 		font-weight: 400;
		// 		color: $bg2-color;
		// 	}
		// }
		.broadcasts {
			background: #ffffff;
			padding: 40upx 31upx 39upx 31upx;
			margin-top: 30upx;
			& > view:nth-child(1) {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 33upx;
				border-bottom: 1upx solid #edeff9;
				& > view:nth-child(1) {
					font-size: 32upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg2-color;
				}
				& > view:nth-child(2) {
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg-color;
				}
			}
			& > view:nth-child(2) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg2-color;
				margin-top: 49upx;
			}
			.reminder {
				margin-top: 37upx;
				border-top: 1upx solid #edeff9;
				// border-bottom: 1upx solid #EDEFF9;
				// padding-bottom: 41upx;
				// 预订单提醒
				& > view:nth-child(1) {
					display: flex;
					align-items: center;
					margin-top: 40upx;
					& > view:nth-child(1) {
						width: 6upx;
						height: 24upx;
						background: $bg11-color;
					}
					& > view:nth-child(2) {
						font-size: 30upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: $bg11-color;
						margin-left: 14upx;
					}
				}
				// 新订单
				.Automatic {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 48upx;
					& > view:nth-child(1) {
						font-size: 32upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: $bg2-color;
					}
					& > view:nth-child(2) {
						display: flex;
						align-items: center;

						& > view:nth-child(1) {
							font-size: 30upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: $bg11-color;
							margin-right: 24upx;
						}
						& > view:nth-child(2) {
							image {
								width: 20upx;
								height: 21upx;
								display: flex;
							}
						}
					}
				}
			}
		}
	}

	.valid {
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: $bg5-color;
		margin-top: 32upx;
		text-align: center;
		padding-bottom: 60upx;
	}
	.authorize {
		padding: 53upx 0upx 41upx 0upx;
		& > view:nth-child(1) {
			font-size: 38upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: $bg2-color;
			text-align: center;
		}
		& > view:nth-child(2) {
			font-size: 32upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(101, 101, 101, 1);
			margin-left: 55upx;
			margin-top: 40upx;
		}
		& > view:nth-child(3) {
			padding: 0 55upx;
			margin-top: 33upx;
			& > view {
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg3-color;
				height: 50upx;
			}
		}
		& > view:nth-child(4) {
			display: flex;
			align-items: center;
			padding: 0upx 99upx;
			justify-content: space-between;
			margin-top: 90upx;
			& > view:nth-child(1) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: $bg3-color;
			}
			& > view:nth-child(2) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: $bg-color;
			}
		}
	}
}
</style>
